09-11-2021

本章內容

• 事件處理的不同寫法
  • 事件處理
  • 事件的值
  • React中的預設行為
• 將參數傳給 Event Handler

事件處理的不同寫法

React element的處理事件與DOM element處理類似，但有語法上的差異。

1. 事件處理：在React上都是駝峰寫法(camelCase); 在HTML DOM中為小寫
2. 事件的值：在JSX中是一個function;在HTML DOM中是一個string

// 在HTML 中的寫法
<button onclick="activateLasers()">
  Activate Lasers
</button>

// 在JSX中的寫法
<button onClick={activateLasers}>
  Activate Lasers
</button>

3. 在React中不能使用retuen false，來避免瀏覽器的預設行為;而是使用PreventDefault

// 在HTML中寫法
<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

// 在React 中寫法
function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
// e 在這裡是一個事件（synthetic event）
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

4. 在使用React就不需要建立一個DOM element後使用addEventListner加上listner，只需要在這個element在一開始被render時提供一個listener

// 使用箭頭函式的寫法
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 這個語法確保 `this` 是在 handleClick 中被綁定：
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

將參數傳給 Event Handler

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// 使用箭頭函示
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// 使用Function.prototype.bind

e 這個參數會被當作ID之後的第二個參數傳遞下去。在箭頭函示時，必須明確的傳遞;若使用bind語法，將會傳遞任何參數下去。